<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="wzc">
        姓：<input type="text" name="" id="" v-model="w"><br> 名：
        <input type="text" name="" id="" v-model="z"><br> 姓名1：
        <input type="text" name="" id="" v-model="c"><br> 姓名2：
        <input type="text" name="" id="" v-model="a"><br>
        <!-- 计算属性存在于缓存之中，多次读取也只按一次计算，后面读取时，会先检查缓存里的数据 
                                getter：属性的getter方法
                                setter：属性的setter方法-->
        <p>{{c}}</p>
        <p>{{c}}</p>
        <p>{{c}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#wzc',
            data: {
                w: 'a',
                z: 'b',
            },
            computed: {
                //什么时候执行：初始化显示  相关的Data属性被调用
                //计算并返回当前属性的值
                c: {
                    get() {
                        return this.w + ' ' + this.z;
                    },
                    set() {

                    }
                },
                a: {
                    //回调函数  当我需要读取当前属性值的时候 根据相关的数据计算并返回当前属性值
                    //回调函数的三个条件    1.你定义的 2.你没有调用 3.但是最终它执行了
                    //1.什么时候调用 2.用来干什么的
                    get() {
                        return this.w + ' ' + this.z;
                    },
                    //回调函数  当属性值发生改变时回调，更新相关的属性数据
                    set(value) { //value是最先的数据
                        const name = value.split(' '); //split是切割字符串的方法
                        this.w = name[0];
                        this.z = name[1];
                    }
                }
            },
            watch: {
                c: function(value) {
                        this.c = value + '' + this.z;
                    }
                    // c: value => this.c = `${this.z}${value}`
            }
        })
        vm.$watch('z', function(value) {
            this.c = this.w + '' + value;
        })
    </script>
</body>

</html>